<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
	<title>家族管理</title>
	<script>
		$(function () { $('.popover-hide').popover('hide');});
	</script>

</head>

<body>

<div class="main-content-inner">
	<!-- #section:basics/content.breadcrumbs -->
	<div class="breadcrumbs" id="breadcrumbs">
		<script type="text/javascript">
			try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
		</script>

		<ul class="breadcrumb">
			<li>
				<i class="ace-icon fa fa-home home-icon"></i>
				<a href="${ctx}/welcome">主页</a>
			</li>
			<li class="active">家族列表</li>
		</ul><!-- /.breadcrumb -->

		<!-- #section:basics/content.searchbox -->
		<div class="nav-search" id="nav-search">
			<form class="form-search" action="${ctx}/family/list" method="GET">
					<span class="input-icon">
						<input type="text" autocomplete="off" name="search_LIKE_fName" placeholder="家族名称" class="nav-search-input" id="nav-search-input" autocomplete="off" value="${param.search_LIKE_fName}" />
						<i class="ace-icon fa fa-search nav-search-icon" onclick="$('.form-search').submit();"></i>
					</span>

				<input type="button" value="搜索" onclick = "$('.form-search').submit();" />
			</form>
		</div><!-- /.nav-search -->

		<!-- /section:basics/content.searchbox -->
	</div>
	<!-- /section:basics/content.breadcrumbs -->

	<div class="page-content">

		<c:if test="${not empty message}">
			<div id="message" class="alert alert-success"><button data-dismiss="alert" class="close">×</button>${message}</div>
		</c:if>

		<div class="page-header">
			<h1>
				家族列表
			</h1>

		</div><!-- /.page-header -->

		<div class="row">
			<div class="col-xs-12">
				<!-- PAGE CONTENT BEGINS -->

				<table id="sample-table-1" class="table table-striped table-bordered table-hover">
					<thead>
					<tr>
						<th class="center">
							<label class="position-relative">
								<input type="checkbox" id="id-toggle-all" class="ace" />
								<span class="lbl"></span>
							</label>
						</th>
						<th>家族名称</th>
						<th>家族描述</th>
						<th>创建时间</th>
						<th>更新时间</th>
						<th>创建人</th>
						<th>管理</th>
					</tr>
					</thead>

					<tbody>
					<c:forEach items="${families.content}" var="family">
						<tr>
							<td class="center">
								<label class="position-relative">
									<input type="checkbox" class="ace" />
									<span class="lbl"></span>
								</label>
							</td>

							<td>
									${family.fName}
							</td>

							<td>
									<span title="${family.fDesp}">
										<c:choose>
											<c:when test="${fn:length(family.fDesp)>20 }">
												<c:out value="${fn:substring(family.fDesp,0,20)}......"></c:out>
												</c:when>
											<c:otherwise>
												${family.fDesp}
											</c:otherwise>
										</c:choose>
									</span>
							</td>
							<td>
								<fmt:formatDate value="${family.createtime}" pattern="yyyy年MM月dd日  HH时mm分ss秒" />
							</td>
							<td>
								<fmt:formatDate value="${family.updatetime}" pattern="yyyy年MM月dd日  HH时mm分ss秒" />
							</td>
							<td>
									${family.userId}
							</td>
							<td>
								<a class="btn btn-xs btn-info" href="${ctx}/family/update/${family.id}">
									修改
								</a>
								<a class="btn btn-xs btn-danger" href="${ctx}/family/delete/${family.id}">
									删除
								</a>
							</td>
						</tr>
					</c:forEach>
					</tbody>
				</table>

			</div>
		</div>

		<tags:pagination page="${families}" paginationSize="5"/>

		<div style="clear:right"><a class="btn btn-info" href="${ctx}/family/createform">新增家族</a></div>
	</div><!-- /.page-content -->
</div>
</body>
</html>
<!-- inline scripts related to this page -->
<script type="text/javascript">
	jQuery(function($){
		//check/uncheck all messages
		//$('#id-toggle-all').removeAttr('checked').on('click', function(){
		//	if(this.checked) {
		//		Inbox.select_all();
		//	} else Inbox.select_none();
		//});
	});
</script>